import React, { useRef } from "react";
import { useComponentConfigStore } from "../../store/component-config";
import { type Component, useComponetsStore } from "../../store/components";
import { message } from "antd";
import type { ActionConfig } from "../Settings/actions/ActionModal";


export function Preview() {
    const { components } = useComponetsStore();
    const { componentConfig } = useComponentConfigStore();

    const componentRefs = useRef<Record<string, any>>({});//组件联动

    function handleEvent(component: Component) {
        const props: Record<string, any> = {};
    
        componentConfig[component.name].events?.forEach((event) => {
            const eventConfig = component.props[event.name];
    
            props[event.name] = (...args: any[]) => {
                eventConfig?.actions?.forEach((action: ActionConfig) => {
                    if (action.type === 'goToLink') {//跳转链接
                        window.location.href = action.url;
                    } else if (action.type === 'showMessage') {//显示提示
                        if (action.config.type === 'success') {
                            message.success(action.config.text);
                        } else if (action.config.type === 'error') {
                            message.error(action.config.text);
                        }
                        alert(action.config.text)
                    } else if(action.type === 'customJS') {//自定义js
                        const func = new Function('context', 'args', action.code);
                        func({
                            name: component.name,
                            props: component.props,
                            showMessage(content: string) {
                                message.success(content)
                                alert(content)
                            }
                        }, args);
                    } else if(action.type === 'componentMethod') {//组件联动
                        const component = componentRefs.current[action.config.componentId];
                    
                        if (component) {
                          component[action.config.method]?.(...args);
                        }
                    }
                    
                })
            
            }
        })
        return props;
    }

    function renderComponents(components: Component[]): React.ReactNode {
        return components.map((component: Component) => {
            const config = componentConfig?.[component.name]

            if (!config?.prod) {
                return null;
            }
            
            return React.createElement(
                config.prod,
                {
                    key: component.id,
                    id: component.id,
                    name: component.name,
                    styles: component.styles,
                    ref: (ref: Record<string, any>) => { componentRefs.current[component.id] = ref; },
                    ...config.defaultProps,
                    ...component.props,
                    ...handleEvent(component)
                },
                renderComponents(component.children || [])
            )
        })
    }

    return <div>
        {renderComponents(components)}
    </div>
}
